<template>
  <div class="hello">
     <div class="fotter-bottom">
       <!-- 左边 -->
       <van-popover
        v-model="showPopover1"
        placement="top"
        trigger="click"
        :actions="actions1"
        @select="onSelect"
      >
        <template #reference>
          <div class="single" >加盟合作</div>
        </template>
      </van-popover>
      <!-- 中间 -->
      <van-popover
        v-model="showPopover2"
        placement="top"
        trigger="click"
        :actions="actions2"
        @select="onSelect"
      >
        <template #reference>
          <div class="single" >网上订单</div>
        </template>
      </van-popover>
        <!-- 右边 -->
       <van-popover
        v-model="showPopover3"
        placement="top"
        trigger="click"
        :actions="actions3"
        @select="onSelect"
      >
        <template #reference>
          <div class="single">关于奈高</div>
        </template>
      </van-popover>
    </div>

  </div>
</template>

<script>
var wx = require('weixin-js-sdk');
// var wx = require('../common/js-sdk');
import { isiOS } from '../common/utils';
// import { fixurlMixin } from '../common/mixin';
import { Popover } from 'vant';
import { Toast } from 'vant';
export default {
    name: 'Accounts',
    // mixins: [fixurlMixin],
    components: {
        [Popover.name]: Popover,
        [Toast.name]: Toast
    },
    data() {
        return {
            showPopover1: false,
            showPopover2: false,
            showPopover3: false,
            // 通过 actions 属性来定义菜单选项
            actions1: [{ text: '网上营销员' }, { text: '合作店' }, { text: '区域代理' }],
            actions2: [{ text: '订奶到家' }, { text: '全国包邮' }, { text: '客服热线' }, { text: '老广北扫查防伪' }],
            actions3: [{ text: '微官网' }, { text: '牛奶知识' }, { text: '促销活动' }]
        };
    },
    created() {
        document.title = '奈高';
    },

    async mounted() {

        // this.httpGet(this.$root.getWeixinSdk, { url: url })
        //     .then(res => {
        //         wx.config({
        //             debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        //             appId: res.appId, // 必填，公众号的唯一标识
        //             timestamp: res.timestamp, // 必填，生成签名的时间戳
        //             nonceStr: res.nonceStr, // 必填，生成签名的随机串
        //             signature: res.signature, // 必填，签名，见附录1
        //             jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2

        //         });
        //         wx.ready(() => {
        //             this.scanCode();
        //         });
        //         wx.error((err) => {
        //             // alert('请在微信里打开');
        //             console.log('err', err);
        //             // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        //         });
        //     })
        //     .catch((err) => {
        //         this.$toast.fail(err);
        //     });
    },
    methods: {

        onSelect(action) {
            if (action.text == '老广北扫查防伪') {
                this.$router.push({ path: './scan-code' });
            } else {
                Toast.loading({
                    message: '加载中...',
                    forbidClick: true
                });
            }
        }
    }
};
</script>

<style scoped lang="stylus">
    @import '~@/common/main.styl'
     .van-popup.van-popover /deep/ .van-popover__content /deep/ .van-popover__action{
          padding 0 !important;
      }

      /deep/ .van-popover__action{
        font-size 13px
      }
      >>>.van-popover__action-text .van-hairline--bottom{
        font-size 13px !important;
      }

    .hello {
      height: 100vh;
      .fotter-bottom{
        display: flex;
        height: 45px;
        align-items: center
        background: #fff;
        width: 100vw;
        position fixed;
        bottom: 0;
        padding:10px 0;
        border-top: 1px solid #f8f8f8;
        .van-popover__wrapper{
          width :33.333%
        }
        /deep/ .van-popover__action{
          padding 0 !important;
        }
        .van-popover__wrapper /deep/.single{
          // flex 1;
          border-left:1px solid #f8f8f8;
          height:30px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-family: "思源黑体 CN Light", Helvetica, Arial, "Hiragino Sans GB", "Microsoft Yahei", "微软雅黑", STHeiti, "华文细黑", "Heiti SC", sans-serif;
          font-size: vw(14);
        }
      }
        flex-x(center)
        .msg {
            word-vw(vw(14),#333)
        }
    }
</style>
